;(function ($, window, document, undefined) {
    var LightBox = function (ele, opts) {
        var self = this;
        this.$element = ele;
        this.defaults = $.extend({}, this.constructor.defaults, opts);
        this.dataGroup = [];
        this.currentIndex = null;

        this.bodyNode = $(document.body);
        this.lightBoxContainer = $("<div class='light-box-container'>");
        this.lightBoxMask = $("<div class='light-box-mask'>");
        this.renderDOM();


        this.lightBoxMask.click(function () {
            self.lightBoxContainer.fadeOut();
            self.lightBoxMask.fadeOut();
        })

        this.lightBoxImgContainer = $("div.light-box-container .light-box-img-container");//图片容器
        this.lightBoxImg = $("img.light-box-img"); //图片
        this.lightBoxDesc = $("div.light-box-container div.light-box-desc");


        // this.closeBtnContainer = $("div.light-box-close"); //关闭按钮容器

        this.lightBoxPreBtn = $(".light-box-img-container .light-box-ctrl.ctrl-pre");
        this.lightBoxNextBtn = $(".light-box-img-container .light-box-ctrl.ctrl-next");

        self.bindCtrBtn();
        this.closeBtn = $("div.light-box-close .ctrl-close");//关闭按钮

        this.$element.delegate("img", "click", function (e) {
            e.stopPropagation();
            self.dataGroup.length = 0;
            self.currentIndex = $(this).index();
            $(this).parent().children("img").each(function (index, item) {
                //console.log(item);
                self.dataGroup.push({
                    index: index,
                    src: item.currentSrc,
                    item: item
                })
            })
            self.initPopUp($(this));
        })

        this.closeBtn.on("click", function () {
            self.hidePopUp();
        })

    }

    //公共配置
    LightBox.defaults = {
        name: 'light-box'
    }
    /*原型方法*/
    LightBox.prototype = {
        constructor: LightBox,
        initPopUp: function ($currentImg) {
            var self = this;
            var curentIndex = $currentImg.index();
            var curentImgSrc = $currentImg.attr("src");
            self.showPopUpAndMask(curentIndex, curentImgSrc);
        },
        changeImgSize: function (curentImgSrc) {
            var self = this;
            //容器中显示图片
            this.loadImg(curentImgSrc, function () {
                self.lightBoxImg.css({
                    width: 'auto',
                    height: 'auto'
                })
                self.lightBoxImg.attr('src', curentImgSrc);
                self.lightBoxImg.hide();
                var imgW = self.lightBoxImg.width();
                var imgH = self.lightBoxImg.height();

                var winW = $(window).width();
                var winH = $(window).height();

                var scale = Math.min(winW / imgW, winH / imgH, 1);
                var scale = scale > 0.8 ? 0.8 : scale;
                var tempW = imgW * scale;
                var tempH = imgH * scale;

                self.lightBoxImg.css({
                    width: tempW,
                    height: tempH
                })
                self.lightBoxImgContainer.animate({
                    width: tempW,
                    height: tempH,
                })

                self.lightBoxContainer.animate({
                    width: tempW,
                    height: tempH,
                    marginLeft: -tempW / 2,
                    top: (winH - tempH) / 2
                }, function () {
                    self.lightBoxImg.fadeIn();
                })
            })
        },
        bindCtrBtn: function () {
            var self = this;
            self.lightBoxPreBtn.hover(function () {
                $(this).addClass("ctrl-pre-show")
            }, function () {
                $(this).removeClass("ctrl-pre-show")
            })
            self.lightBoxNextBtn.hover(function () {
                $(this).addClass("ctrl-next-show")
            }, function () {
                $(this).removeClass("ctrl-next-show")
            })


            self.lightBoxPreBtn.click(function () {
                var currentIndex = null;
                var imgObj = null;
                if (self.currentIndex > 0) {
                    currentIndex = self.currentIndex - 1;
                    imgObj = self.dataGroup[currentIndex];
                    self.changeImgSize(imgObj.src);
                    self.currentIndex = currentIndex;
                } else if (self.currentIndex <= 0) {
                    currentIndex = self.dataGroup.length - 1;
                    imgObj = self.dataGroup[currentIndex];
                    self.changeImgSize(imgObj.src);
                    self.currentIndex = currentIndex;
                }
            })

            self.lightBoxNextBtn.click(function () {
                var currentIndex = null;
                var imgObj = null;
                if (self.currentIndex < self.dataGroup.length - 1) {
                    currentIndex = self.currentIndex + 1;
                    imgObj = self.dataGroup[currentIndex];
                    self.changeImgSize(imgObj.src);
                    self.currentIndex = currentIndex;
                } else if (self.currentIndex >= self.dataGroup.length - 1) {
                    currentIndex = 0;
                    imgObj = self.dataGroup[currentIndex];
                    self.changeImgSize(imgObj.src);
                    self.currentIndex = currentIndex;
                }
            })
        },
        loadImg: function (curentImgSrc, callback) {
            var $img = $("<img>");
            $img.load(function () {
                callback();
            })
            $img.attr("src", curentImgSrc);
        },

        showPopUpAndMask: function (curentIndex, curentImgSrc) {
            var self = this;
            this.lightBoxImg.hide();
            this.lightBoxDesc.hide();
            this.lightBoxMask.fadeIn();
            var winW = $(window).width();
            var winH = $(window).height();

            var containerW = winW / 2;
            var containerH = winH / 2;

            this.lightBoxContainer.show();
            this.lightBoxImgContainer.css({
                width: winW / 2,
                height: winH / 2,
            })
            this.lightBoxContainer.css({
                width: winW / 2,
                height: winH / 2,
                marginLeft: -(winW - containerW) / 2,
                top: -(winH) / 2 - 10
            }).animate({
                top: (winH - containerH) / 2 - 5
            }, 700, function () {
                //回调
                self.changeImgSize(curentImgSrc)

            })


            //TODO 这里执行是否显示图片描述


        },
        hidePopUp: function () {
            var self = this;
            self.lightBoxContainer.fadeOut();
            self.lightBoxMask.fadeOut();
        },

        renderDOM: function () {
            var strDom = '<div class="light-box-img-container">\n' +
                '        <span class="light-box-ctrl ctrl-pre "></span>\n' +
                '            <img src="" class="light-box-img">\n' +
                '        <span class="light-box-ctrl ctrl-next "></span>\n' +
                '    </div>\n' +
                '    <div class="light-box-desc">\n' +
                '        <p>占位</p>\n' +
                '        <span>文字描述</span>\n' +
                '    </div>\n' +
                '    <div class="light-box-close">\n' +
                '        <a class="ctrl-close"></a>\n' +
                '    </div>'

            //插入到弹出层
            this.lightBoxContainer.html(strDom)
            //追加遮罩层
            this.bodyNode.append(this.lightBoxContainer, this.lightBoxMask);
        }

    }

    /*扩展到jquery*/
    $.fn.LightBox = function (opts) {
        return this.each(function () {
            new LightBox($(this), opts);
        })
    }

})(jQuery, window, document, undefined)
